<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="<%=basePath%>">

	<title>登录页面</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
		@IMPORT url("css/base.css");
		#login{
			width:1340px;
			height:1400px;
			margin-top: 5px;
		}

		#login-left{
			width:180px;
			height:100%;
			float: left;
		}
		#login-center{
			width:980px;
			height:100%;
			float:left;
			border-left: 1px #eaebed solid;
		}
		#login-right{
			width:180px;
			height:100%;
			float:left;
		}


		.gps {

			display: block;
			padding: 5px 5px;
			font-size: 14px;
			background: linear-gradient(to right, #eee, #FEFFFE);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-family: "microsoft yahei";
			margin-bottom: 10px;
			border-radius: 20px;
		}
		.gps a,
		.gps span {
			font-size: 14px;
			float: left;
			padding: 0 5px;
			color: #000000;
			max-width: 250px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.gps img {
			float: left;
			width: 19px;
			height: 19px;
		}

		.input{
			width:100%;
			height:380px;
			margin-top: 20px;
		}
		.input-case{
			width:400px;
			height:360px;
			margin:30px 150px;
			border: 2px #fff solid;
		}
		.input-case:HOVER {
			border-color:#5c85bd;
		}
		.yonghu{
			width:100%;
			height:40px;
			line-height:40px;
			text-align:center;
			font-size:20px;
			color:#437ad7;
		}
		.yan{
			width:100%;
			height:20px;
			color:red;
			text-align:center;
		}
		.input-text{
			width:300px;
			height:40px;
			border: 1px white solid;
			margin: 20px 50px;
		}
		.left{
			width:200px;
			height:100%;
			float: left;
		}

		.input-text:HOVER {
			border-color: #5c85bd;
		}
		.click{
			width:100%;
			height:20px;
		}
		.click a {
			color: #0e0f8e;
			margin-right: 2px;
			margin-left:240px;
			float: right;
		}
		a{
			text-decoration: none;
		}
		.click a:HOVER {
			text-decoration: underline;
		}
		.right{
			width:100px;
			height:100%;
			float: right;
			background-color:#3881f0;
		}

		.authcode_img b{
			width:20px;
			height:40px;
			font-size:25px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

	<script type="text/javascript">

		function getAuthCode(){
			var authcode = "";
			var fontStyle = new Array("微软雅黑","Courier New","幼圆","宋体","Dotum","楷书","华文行楷");
			var colors = new Array("#1212c9","#c9b612","#12c930","#c912b1","#12c9c7","#c91f12","#fe7f02");
			var n = 4;
			for(var i=0;i<n;i++){
				var num = parseInt(Math.random()*10);
				authcode += num;
				$(".authcode_img .code"+(i+1)+"").html(num);
				var maxJ = 1;
				for(var j=0;j<maxJ;j++){
					var fontIndex = parseInt(Math.random()*10);
					var colorIndex = parseInt(Math.random()*10);
					if(fontIndex<fontStyle.length&&colorIndex<colors.length){
						$(".authcode_img .code"+(i+1)+"").css("font-family",fontStyle[fontIndex]).css("color",colors[colorIndex]);
					}else{
						maxJ++;
					}
				}
			}
			return authcode;
		}
		var flagNum = 1;
		$(function(){
			var authcode = getAuthCode();
			$("#authcode").val(authcode);
			$(".authcode_img").click(function(){
				authcode = getAuthCode();
				$("#authcode").val(authcode);
				$("#check_authcode").val("");
			});

			$("input[name='authcode']").blur(function(){
				var rand = $("#authcode").val();
				var inputs = $("input[name='authcode']").val();
				if(inputs==""){
					$(".yan").html("请输入验证码");
					flagNum = 1;
				}else{
					if(inputs.toUpperCase()==rand.toUpperCase()){
						flagNum = 0;
					}else{
						$(".yan").html("验证码输入错误");
						flagNum = 1;
					}
				}
			});
		});
		function xx(e){
			var e=window.event||e;
			var code=e.keyCode||e.which;
			if(code==13){
				formx();
			}
		}
		function formx(){
			var acco=$("#acco").val();
			var pwd=$("#pwd").val();
			if(acco!=""&&pwd!=""&&flagNum==0){
				$.ajax({
					url:"LoginServlet?r="+Math.random(),
					data:"name="+acco+"&pwd="+pwd,
					type:"post",
					success:function(text){
						if(text==0){
							$(".yan").html("账号或密码错误");
						}else{
							window.location.href="jsp/public/board.jsp";
						}

					}
				});
			}else{
				$(".yan").html("未输入用户名或密码");
			}
		};
	</script>
</head>

<body>
<div id="top">
	<jsp:include page="../../WEB-INF/includes/top.inc.jsp"></jsp:include>
</div>
<div id="login">
	<div id="login-left"></div>
	<div id="login-center">
		<div class="center-top">
			<b>论坛信息：</b>会员 <span>221</span> 人&nbsp;&nbsp; 帖子
			<span>179</span> 篇 &nbsp;&nbsp;&nbsp;&nbsp;
			<b>站长寄语：</b>梦虽然遥不可及，但并不是不可能实现；只要坚持，就会离梦越来越近！
		</div>

		<div class="center-body">

			<div class="center-body-left">
				<div class="gps">
					<span>您的位置：</span>
					<img alt="首页" src="images/home.png">
					<a href="jsp/public/first.jsp" style="padding-left: 0px;">首页</a>
					<span>&raquo;</span><span>登录</span>
					<div class="clear"></div>

					<div class="input">
						<div class="input-case">
							<form action="LoginServlet" method="post">
								<div class="yonghu">
									用户登录
								</div>
								<div class="yan"></div>
								<div class="input-text"><input name="name" id="acco" type="text" style="width:300px;height:40px"/></div>
								<div class="input-text"><input name="pwd"  id="pwd" type="password" style="width:300px;height:40px"/></div>
								<input type="hidden" id="authcode" />
								<div class="input-text">
									<div class="left">
										<input type="text"  name="authcode" style="width:300px;height:40px"/>
									</div>
									<div class="right" id="check_authcode">

										<div class="authcode_img">
											<b class="code1"></b>
											<b class="code2"></b>
											<b class="code3"></b>
											<b class="code4"></b>
										</div>

									</div>
								</div>
								<div class="input-text"><input type="button" style="width:300px;height:40px;background-color: #398bfb;color: #fff;font-size: 20px;" onclick="formx();" value="登录"/></div>
								<div class="click"><a href="jsp/public/register.jsp">没有账号？马上注册</a></div>
							</form>
						</div>
					</div>

				</div>

			</div>

			<div class="center-body-right">
				<jsp:include page="../../WEB-INF/includes/body.left.inc.jsp"></jsp:include>
			</div>
		</div>

	</div>
	<div id="login-right"></div>
</div>

<div id="bottom">
	<jsp:include page="../../WEB-INF/includes/bottom.inc.jsp"></jsp:include>
</div>
</body>
</html>
	